<template>
  <div>
    <h1>pinia</h1>
    <el-button @click="get" class="btn">测试pinia</el-button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useUsersStore } from "@/store/user";
const get = () => {
  const store = useUsersStore();
  console.log(store);
  // 或者
  const { uid, username, exp } = useUsersStore();
  console.log(uid);
  console.log(username);
  console.log(exp);
  // 修改
  store.exp = 200;
  // 重置状态
  store.$reset();
  console.log(store);
  console.log(store.addExp);
  console.log(store.addExpCustom(180, 20));
  store.showParam("test");
};
</script>
<style lang="scss" scoped>
.btn {
  color: $text-color;
  &:hover {
    background: lighten($primary-color, 10%);
  }
}
</style> 